<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        <el-row>
            <el-button type="primary" icon="CirclePlus" @click="addCateDialog">添加分类</el-button>
        </el-row>

        <!-- <el-row :gutter="12"> -->
        <el-row>
            <el-table :data="tableData.data" style="width: 100%; margin-bottom: 20px" row-key="id" border>
                <el-table-column prop="id" label="ID" sortable />
                <el-table-column prop="name" label="分类名称" sortable />
                <el-table-column prop="level" label="分类等级" sortable>
                    <template #default="scope">
                        <el-tag v-if="scope.row.level == 1" type="success">一级分类</el-tag>
                        <el-tag v-else-if="scope.row.level == 2" type="primary">二级分类</el-tag>
                        <el-tag v-else-if="scope.row.level == 3" type="warning">三级分类</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" :icon="Edit">编辑</el-button>
                        <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-card>
    <!-- 增加分类-->
    <el-dialog v-model="addDialogVisible" title="增加分类">
        <el-form :model="addForm" :rules="addRules" ref="addFormRef">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="父类节点" prop="pid">
                <el-cascader v-model="value" :options="options.data" :props="props" @change="handleChange" separator="  >  "
                    clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addCate">确定</el-button>
                <el-button @click="addDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<script setup>
import { ArrowRight, Search, CirclePlus } from '@element-plus/icons-vue'
import api from '@/api/index.js';
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue'
onMounted(() => {
    get_category(),
        get_options()
})

const tableData = reactive({
    data: []
})

let addDialogVisible = ref(false)
const addForm = reactive({
    name: '',
    pid: 0,
    level: 1,
})

let addRules = reactive({
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ],
})
const value = ref([])
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'id',
    checkStrictly: true,
}
const options = reactive({
    data: []
})
const get_options = () => {
    api.get_categories(2).then(res => {
        options.data = res.data.data
    })
}


const get_category = () => {
    api.get_categories(3).then(res => {
        tableData.data = res.data.data;
        console.log(tableData.data)
    })
}
const addCateDialog = () => {
    addDialogVisible.value = true
}
const handleChange = (value) => {
    console.log(value);
    if (value) {
        if (value.length == 1) {
            addForm.pid = value[0]
            addForm.level = 2
        } else if (value.length == 2) {
            addForm.pid = value[1]
            addForm.level = 3
        }
    } else {
        addForm.pid = 0
        addForm.level = 1
    }
    console.log(addForm);
}
const addCate = () => {
    api.add_category(addForm).then(res=>{
        console.log(res)
        addDialogVisible.value = false
        get_category()
        get_options()
    })
}
</script>

<style scoped>
.box-card {
    margin-top: 20px;
}
</style>